.gantt.light {
  --ls-primary-background-color: #fff;
  --ls-secondary-background-color: #f8f8f8;
  --ls-tertiary-background-color: #047857;
  --ls-quaternary-background-color: #fff;
  --ls-quinary-background-color: #c7e8e0;

  --ls-title-text-color: #181a2b;
  --ls-text-color: #5f636c;
  --ls-description-text-color: #a7a7a7;
  --ls-tint-text-color: #e3e3e3;

  --ls-calendar-weekday-background-color: #f5f7f9;
  --ls-calendar-weekend-background-color: #f3f5f9;
  --ls-calendar-weekend-background-pattern: #e1e2e6;
}
.gantt.dark {
  --ls-primary-background-color: #282c32;
  --ls-secondary-background-color: #282c31;
  --ls-tertiary-background-color: #fcb714;
  --ls-quaternary-background-color: #32373d;
  --ls-quinary-background-color: #6b531a;

  --ls-title-text-color: #fafafe;
  --ls-text-color: #aaadb3;
  --ls-description-text-color: #7d7f83;
  --ls-tint-text-color: #47484a;

  --ls-calendar-weekday-background-color: #212528;
  --ls-calendar-weekend-background-color: #1d2124;
  --ls-calendar-weekend-background-pattern: #2e2f30;
}
.bg-primary {
  background-color: var(--ls-primary-background-color);
}
.bg-secondary {
  background-color: var(--ls-secondary-background-color);
}
.bg-tertiary {
  background-color: var(--ls-tertiary-background-color);
}
.bg-quaternary {
  background-color: var(--ls-quaternary-background-color);
}
.bg-quinary {
  background-color: var(--ls-quinary-background-color);
}
.title-text {
  color: var(--ls-title-text-color);
}
.text {
  color: var(--ls-text-color);
}
.description-text {
  color: var(--ls-description-text-color);
}
.tint-text {
  color: var(--ls-tint-text-color);
}
.scroll-style::-webkit-scrollbar {
  background-color: transparent;
}
.scroll-style::-webkit-scrollbar-corner {
  background-color: transparent;
}
.scroll-style::-webkit-scrollbar-thumb {
  background-color: var(--ls-tint-text-color);
  border: 5px solid transparent;
  border-radius: 9px;
  background-clip: content-box;
}

/* 左上角空白占位 */
.calendar__placeholder {
  width: 160px;
  height: 50px;
  /* z-index 必须介于 sidebar 与 calendar header 之间, 才能遮挡滚动的 sidebar,但不遮挡 calendar header 日期 */
  z-index: 11;
}

/* 侧边栏 */
.side-bar {
  /* flex 子元素宽度和大于容器时, 使用 flex-basic 设置宽度, width 是无效的 */
  /* https://www.jianshu.com/p/e6ad2c2cb7c3 */
  flex: 0 0 160px;
  /* width: 160px; */
  /* margin-top: 50px; */
  max-width: 160px;
  border-right: 1px solid var(--ls-tint-text-color);
}

.group {
  margin-bottom: 0;  /* CALENDAR_GROUP_GAP */
  /* 内阴影边框 */
  /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); */
  /* @apply shadow; */
}
.group__title {
  height: 40px; /* SIDEBAR_GROUP_TITLE_HEIGHT */
  top: 50px;
  font-size: 16px;
  padding-right: 16px;
}
.group__title svg {
  font-size: 12px;
  margin-right: 3px;
}
.group__content {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
}
.group__event {
  height: 40px;  /* CALENDAR_GROUP_EVENT_HEIGHT */
  line-height: 40px;
  display: flex;
  align-items: center;
  display: block;
}
.group__event.milestone::before{
  display: inline-block;
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid var(--ls-tertiary-background-color);
  border-radius: 3px;
  transform: rotate(45deg);
  margin: 0 8px 0 2px;
}


.calendar {
  /* fix flex1的子元素内容过多时，被撑开导致 flex-1 失效 */
  /* https://juejin.cn/post/6974356682574921765 */
  width: 0;
}
/* 日历头部 */
.calendar__header {
  height: 25px;
  border-bottom: 1px solid var(--ls-tint-text-color);
  /* border-bottom: 1px solid #efefef; */
}
.calendar__header::-webkit-scrollbar {
  display: none;
}
.calendar__date {
  width: 108px; /* CALENDAR_EVENT_WIDTH */
  height: 25px;
}
.view-week .calendar__date {
  width: 44px; /* CALENDAR_EVENT_WIDTH */
}
.view-month .calendar__date {
  width: 20px; /* CALENDAR_EVENT_WIDTH */
}
.calendar__date.today {
  color: #ff0000;
}
.calendar__date.weekend {
  color: var(--ls-description-text-color);
}

/* 日历内容区 */
.calendar__content {

}
.calendar__content__back {
  width: 108px;  /* CALENDAR_EVENT_WIDTH */
  height: 100%;
  /* background-color: #f8f8f8; */
  background-color: var(--ls-calendar-weekday-background-color);

  border-right: 1px solid var(--ls-tint-text-color);
}
.view-week .calendar__content__back {
  width: 44px;  /* CALENDAR_EVENT_WIDTH */
}
.view-month .calendar__content__back {
  width: 20px;  /* CALENDAR_EVENT_WIDTH */
}
.calendar__content__back.weekend {
  background-color: var(--ls-calendar-weekend-background-color);
  background-image: repeating-linear-gradient(120deg, var(--ls-calendar-weekend-background-pattern), var(--ls-calendar-weekend-background-pattern) 1px, transparent 0, transparent 12px);
}
.calendar__content__back.today {
  background-color: var(--ls-quinary-background-color);
}
.calendar__content__back.today::before {
  content: 'Today';
  display: block;
  position: sticky;
  top: 50px;
  width: 100%;
  height: 24px;
  text-align: center;
  background-color: var(--ls-tertiary-background-color);
  color: var(--ls-primary-background-color);
}
.calendar__group {
  /* border-bottom: 1px solid #e9dceb;
  border-top: 1px solid #e9dceb; */
  margin-bottom: 0;   /* CALENDAR_GROUP_GAP */
  box-sizing: content-box;
}
.calendar__event {
  line-height: 36px;  /* CALENDAR_EVENT_HEIGHT */
  margin: 2px 4px;
  padding: 0 4px;
}
.calendar__event.completed {
  color: var(--ls-description-text-color);
}
.calendar__milestone__line {
  border-left: 2px solid var(--ls-tertiary-background-color);
}
.calendar__milestone__text {
  height: 40px;
  line-height: 40px;
  padding-left: 16px;
}
.calendar__milestone__text::before {
  content: "";
  position: absolute;
  left: -9px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background-color: var(--ls-tertiary-background-color);
  transform: rotateZ(45deg);
}
.calendar__milestone__text .milestone__mark {
  position: absolute;
  left: -8px;
  width: 13px;
  height: 13px;
}
.single_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}